.bk-tabs-header {
  .flex();
  .flex-wrap(nowrap);
  .align-items(center);
  overflow: hidden;

  .no-user-select();

  .bk-btn-group {
    height: auto;
    margin-right: 5px;

    & > .bk-btn {
      .flex-grow(0);
      height: auto;
      padding: 4px 4px;
    }
  }

  .bk-headers-wrapper {
    .flex-grow(1);
    overflow: hidden;
    color: lighten(black, 40%);
  }

  @border: 1px solid lighten(black, 90%);
  &.bk-above .bk-headers-wrapper { border-bottom: @border; }
  &.bk-right .bk-headers-wrapper { border-left:   @border; }
  &.bk-below .bk-headers-wrapper { border-top:    @border; }
  &.bk-left  .bk-headers-wrapper { border-right:  @border; }

  &.bk-above, &.bk-below {
    .flex-direction(row);

    .bk-headers {
      .flex-direction(row);
    }
  }
  &.bk-left,  &.bk-right {
    .flex-direction(column);

    .bk-headers {
      .flex-direction(column);
    }
  }

  .bk-headers {
    position: relative;
    .flex();
    .flex-wrap(nowrap);
    .align-items(center);
  }

  .bk-tab {
    padding: 4px 8px; // @padding-vertical @padding-horizontal;
    border: solid transparent;
    white-space: nowrap;
    cursor: pointer;

    &:hover {
      background-color: lighten(black, 95%);
    }

    &.bk-active {
      color: lighten(black, 30%);
      background-color: white;
      border-color: lighten(black, 90%);
    }

    .bk-close {
      margin-left: 10px;
    }
  }

  &.bk-above .bk-tab {
    border-width: 3px 1px 0px 1px;
    border-radius: @border-radius @border-radius 0 0;
  }
  &.bk-right .bk-tab {
    border-width: 1px 3px 1px 0px;
    border-radius: 0 @border-radius @border-radius 0;
  }
  &.bk-below .bk-tab {
    border-width: 0px 1px 3px 1px;
    border-radius: 0 0 @border-radius @border-radius;
  }
  &.bk-left .bk-tab {
    border-width: 1px 0px 1px 3px;
    border-radius: @border-radius 0 0 @border-radius;
  }
}

.bk-close {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;utf8,\
    <svg viewPort="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg">\
      <line x1="1" y1="9" x2="9" y2="1" stroke="gray" stroke-width="2"/>\
      <line x1="1" y1="1" x2="9" y2="9" stroke="gray" stroke-width="2"/>\
    </svg>');
}
.bk-close:hover {
  background-image: url('data:image/svg+xml;utf8,\
    <svg viewPort="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg">\
      <line x1="1" y1="9" x2="9" y2="1" stroke="red" stroke-width="2"/>\
      <line x1="1" y1="1" x2="9" y2="9" stroke="red" stroke-width="2"/>\
    </svg>');
}
